<template>
  <div class="course-video">
    <van-nav-bar
      title="视频"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    ></van-nav-bar>
    <div id="video-container"></div>
  </div>
</template>

<script>
  import { getVideoInfo } from '@/services/course'

  export default {
    name: 'CourseVideo',
    props: {
      lessonId: {
        type: [Number, String],
        required: true,
      },
    },
    data() {
      return {
        videoInfo: {},
      }
    },
    created() {
      this.loadVideoInfo()
    },
    methods: {
      async loadVideoInfo() {
        const { content } = await getVideoInfo(this.lessonId)
        console.log(content)
        new window.Aliplayer({
            id: "video-container", // 视频容器ID
            vid: content.fileId, // 视频ID
            playauth: content.playAuth, // 播放凭证
            format: 'mp4',
            mediaType: 'video',
            width: "100%",
            height: "100%",
            autoplay: true,
            isLive: false,
            rePlay: false,
            playsinline: true,
            preload: true,
            controlBarVisibility: "hover",
            useH5Prism: true,
            language: "en-us"
          }, function (player) {
            console.log("The player is created")
          }
        )
      }
    }
  }
</script>

<style lang="scss" scoped>
  .course-video {
    width: 100%;
    height: 210px;
  }

  #video-container {
    width: 100%;
    height: auto;
  }
</style>
